﻿<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" xmlns:position="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"
          th:href="@{/static/h-ui/css/H-ui.min.css}"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"
          th:href="@{/static/h-ui.admin/css/H-ui.admin.css}"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"
          th:href="@{/lib/Hui-iconfont/1.0.8/iconfont.css}"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css"
          th:href="@{/static/h-ui.admin/skin/default/skin.css}" id="skin"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"
          th:href="@{/static/h-ui.admin/css/style.css}"/>
    <link rel="stylesheet" href="css/stylesheets/style.css" th:href="@{/static/player/css/stylesheets/style.css}">

    <!--[if IE 6]>
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->

    <title>歌单详情展示</title>
    <link href="lib/lightbox2/2.8.1/css/lightbox.css" th:href="@{/lib/lightbox2/2.8.1/css/lightbox.css}"
          rel="stylesheet" type="text/css">
</head>
<body>

<!--<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 歌单管理 <span-->
<!--class="c-gray en">&gt;</span> 歌单详情-->
<!--<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>-->
<!--</nav>-->
<div class="container-fluid">
    <div class="row" style="margin-top: 20px">
        <div class="col-sm-5 ">
            <div style="float: right;margin-right: 80px">
                <a href="temp/big/weishengjian2.jpg" th:href="${songSheet.img}" data-lightbox="gallery" data-title=""
                   th:attr="data-title = ${songSheet.songSheetName}">
                    <img class="radius" src="temp/Thumb/weishengjian2.jpg" th:src="${songSheet.img}" width="250" height="250">
                </a>
            </div>
        </div>
        <div class="col-sm-5 ">
            <h3> [[${songSheet.songSheetName}]]</h3><br>
            <p>创建人：[[${songSheet.nickname}]]</p>
            <p>创建时间：[[${songSheet.createtime}]]</p>
            <p>访问量：[[${songSheet.trafficVolume}]]</p>
            <p>收藏量：[[${songSheet.collectionVolume}]]</p>
        </div>
    </div>
    <div class="row">
        <div id="background"></div>
        <div class="row">
            <div id="player" class="col-sm-12 ">
                <div class="cover"></div>
                <div class="ctrl">
                    <div class="tag">
                        <strong>Title</strong>
                        <span class="artist">Artist</span>
                        <span class="album">Album</span>
                    </div>
                    <div class="control">
                        <div class="left">
                            <div class="rewind icon"></div>
                            <div class="playback icon"></div>
                            <div class="fastforward icon"></div>
                        </div>
                        <div class="volume right">
                            <div class="mute icon left"></div>
                            <div class="slider left">
                                <div class="pace"></div>
                            </div>
                        </div>
                    </div>
                    <div class="progress" style="height: 50px">
                        <div class="slider">
                            <div class="loaded"></div>
                            <div class="pace"></div>
                        </div>
                        <div class="timer left">0:00</div>
                        <div class="right">
                            <div class="repeat icon"></div>
                            <div class="shuffle icon"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3 col-sm-offset-5">
                <ul id="playlist"></ul>
            </div>
        </div>
    </div>

</div>
<!--<input id="musics" type="hidden" th:value="${musics}">-->
<!--_footer 作为公共模版分离出去-->
<script src="js/jquery-1.7.2.min.js" th:src="@{/static/player/js/jquery-1.7.2.min.js}"></script>
<!--<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js" th:src="@{/lib/jquery/1.9.1/jquery.min.js}"></script>-->
<script type="text/javascript" src="lib/layer/2.4/layer.js" th:src="@{/lib/layer/2.4/layer.js}"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js" th:src="@{/static/h-ui/js/H-ui.min.js}"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"
        th:src="@{/static/h-ui.admin/js/H-ui.admin.js}"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->

<script type="text/javascript" src="lib/lightbox2/2.8.1/js/lightbox.min.js"
        th:src="@{/lib/lightbox2/2.8.1/js/lightbox.min.js}"></script>
<script src="js/jquery-ui-1.8.17.custom.min.js" th:src="@{/static/player/js/jquery-ui-1.8.17.custom.min.js}"></script>

<!--<script src="js/script.js" th:src="@{/static/player/js/script.js}"></script>-->

<script type="text/javascript" th:inline="javascript">

    jQuery(function ($) {
        $(".portfolio-area li").Huihover();
        var musics = [[${musics}]];
        var repeat = localStorage.repeat || 0,
            shuffle = localStorage.shuffle || 'false',
            continous = true,
            autoplay = true,
            playlist = [];
        for (var i = 0; i < musics.length; i++) {
            var item = musics[i];
            var temp = {};
            temp.title = item.musicName;
            temp.artist = item.author;
            temp.album = item.musicName + '.mp3';
            temp.cover = item.musicimg;
            temp.mp3 = item.address;
            temp.ogg = '';
            // console.log(temp);
            playlist.push(temp);
        }
        // Load playlist
        for (var i = 0; i < playlist.length; i++) {
            var item = playlist[i];
            $('#playlist').append('<li>' + item.artist + ' - ' + item.title + '</li>');
        }

        var time = new Date(),
            currentTrack = shuffle === 'true' ? time.getTime() % playlist.length : 0,
            trigger = false,
            audio, timeout, isPlaying, playCounts;

        var play = function () {
            audio.play();
            $('.playback').addClass('playing');
            timeout = setInterval(updateProgress, 500);
            isPlaying = true;
        }

        var pause = function () {
            audio.pause();
            $('.playback').removeClass('playing');
            clearInterval(updateProgress);
            isPlaying = false;
        }

        // Update progress
        var setProgress = function (value) {
            var currentSec = parseInt(value % 60) < 10 ? '0' + parseInt(value % 60) : parseInt(value % 60),
                ratio = value / audio.duration * 100;

            $('.timer').html(parseInt(value / 60) + ':' + currentSec);
            $('.progress .pace').css('width', ratio + '%');
            $('.progress .slider a').css('left', ratio + '%');
        }

        var updateProgress = function () {
            setProgress(audio.currentTime);
        }

        // Progress slider
        $('.progress .slider').slider({
            step: 0.1, slide: function (event, ui) {
                $(this).addClass('enable');
                setProgress(audio.duration * ui.value / 100);
                clearInterval(timeout);
            }, stop: function (event, ui) {
                audio.currentTime = audio.duration * ui.value / 100;
                $(this).removeClass('enable');
                timeout = setInterval(updateProgress, 500);
            }
        });

        // Volume slider
        var setVolume = function (value) {
            audio.volume = localStorage.volume = value;
            $('.volume .pace').css('width', value * 100 + '%');
            $('.volume .slider a').css('left', value * 100 + '%');
        }

        var volume = localStorage.volume || 0.5;
        $('.volume .slider').slider({
            max: 1, min: 0, step: 0.01, value: volume, slide: function (event, ui) {
                setVolume(ui.value);
                $(this).addClass('enable');
                $('.mute').removeClass('enable');
            }, stop: function () {
                $(this).removeClass('enable');
            }
        }).children('.pace').css('width', volume * 100 + '%');

        $('.mute').click(function () {
            if ($(this).hasClass('enable')) {
                setVolume($(this).data('volume'));
                $(this).removeClass('enable');
            } else {
                $(this).data('volume', audio.volume).addClass('enable');
                setVolume(0);
            }
        });

        // Switch track
        var switchTrack = function (i) {
            if (i < 0) {
                track = currentTrack = playlist.length - 1;
            } else if (i >= playlist.length) {
                track = currentTrack = 0;
            } else {
                track =currentTrack = i;
            }

            $('audio').remove();
            loadMusic(track);
            if (isPlaying == true) play();
        }

        // Shuffle
        var shufflePlay = function () {
            var time = new Date(),
                lastTrack = currentTrack;
            currentTrack = time.getTime() % playlist.length;
            if (lastTrack == currentTrack) ++currentTrack;
            switchTrack(currentTrack);
        }

        // Fire when track ended
        var ended = function () {
            pause();
            audio.currentTime = 0;
            playCounts++;
            if (continous == true) isPlaying = true;
            if (repeat == 1) {
                play();
            } else {
                if (shuffle === 'true') {
                    shufflePlay();
                } else {
                    if (repeat == 2) {
                        switchTrack(++currentTrack);
                    } else {
                        if (currentTrack < playlist.length) switchTrack(++currentTrack);
                    }
                }
            }
        }

        var beforeLoad = function () {
            var endVal = this.seekable && this.seekable.length ? this.seekable.end(0) : 0;
            $('.progress .loaded').css('width', (100 / (this.duration || 1) * endVal) + '%');
        }

        // Fire when track loaded completely
        var afterLoad = function () {
            if (autoplay == true) play();
        }

        // Load track
        var loadMusic = function (i) {
            var item = playlist[i],
                newaudio = $('<audio>').html('<source src="' + item.mp3 + '"><source src="' + item.ogg + '">').appendTo('#player');

            $('.cover').html('<img src="' + item.cover + '" alt="' + item.album + '">');
            $('.tag').html('<strong>' + item.title + '</strong><span class="artist">' + item.artist + '</span><span class="album">' + item.album + '</span>');
            $('#playlist li').removeClass('playing').eq(i).addClass('playing');
            audio = newaudio[0];
            audio.volume = $('.mute').hasClass('enable') ? 0 : volume;
            audio.addEventListener('progress', beforeLoad, false);
            audio.addEventListener('durationchange', beforeLoad, false);
            audio.addEventListener('canplay', afterLoad, false);
            audio.addEventListener('ended', ended, false);
        }

        loadMusic(currentTrack);
        $('.playback').on('click', function () {
            if ($(this).hasClass('playing')) {
                pause();
            } else {
                play();
            }
        });
        $('.rewind').on('click', function () {
            if (shuffle === 'true') {
                shufflePlay();
            } else {
                switchTrack(--currentTrack);
            }
        });
        $('.fastforward').on('click', function () {
            if (shuffle === 'true') {
                shufflePlay();
            } else {
                switchTrack(++currentTrack);
            }
        });
        $('#playlist li').each(function (i) {
            var _i = i;
            $(this).on('click', function () {
                switchTrack(_i);
            });
        });

        if (shuffle === 'true') $('.shuffle').addClass('enable');
        if (repeat == 1) {
            $('.repeat').addClass('once');
        } else if (repeat == 2) {
            $('.repeat').addClass('all');
        }

        $('.repeat').on('click', function () {
            if ($(this).hasClass('once')) {
                repeat = localStorage.repeat = 2;
                $(this).removeClass('once').addClass('all');
            } else if ($(this).hasClass('all')) {
                repeat = localStorage.repeat = 0;
                $(this).removeClass('all');
            } else {
                repeat = localStorage.repeat = 1;
                $(this).addClass('once');
            }
        });

        $('.shuffle').on('click', function () {
            if ($(this).hasClass('enable')) {
                shuffle = localStorage.shuffle = 'false';
                $(this).removeClass('enable');
            } else {
                shuffle = localStorage.shuffle = 'true';
                $(this).addClass('enable');
            }
        });
    });

</script>
</body>
</html>